<template>
  <el-form ref="ruleFormRef" :rules="rules" label-width="140px" :disabled="props.preview" :model="props">
    <el-form-item label="枚举值">
      <el-form-item prop="tableInfoId" style="width: 25%">
        <el-select :model-value="props.tableInfoId" placeholder="选择表" @change="value => emit('update:tableInfoId', value)">
          <el-option-group v-for="group in dataSource" :key="group" :label="group">
            <el-option v-for="item in tableInfo" :key="item.id" :label="item.name" :value="item.id" />
          </el-option-group>
        </el-select>
      </el-form-item>

      <el-form-item prop="valueCode" style="width: 25%">
        <el-select
          :model-value="props.valueCode"
          :disabled="!props.tableInfoId"
          placeholder="选择value"
          @change="value => emit('update:valueCode', value)"
        >
          <el-option v-for="item in tableColumns" :key="item.columnCode" :label="item.columnName" :value="item.columnCode" />
        </el-select>
      </el-form-item>

      <el-form-item prop="valueLabel" style="width: 25%">
        <el-select
          :model-value="props.valueLabel"
          :disabled="!props.valueCode"
          placeholder="选择label"
          @change="value => emit('update:valueLabel', value)"
        >
          <el-option v-for="item in tableColumns" :key="item.columnCode" :label="item.columnName" :value="item.columnCode" />
        </el-select>
      </el-form-item>

      <el-form-item prop="date2" style="width: 25%">
        <el-button :icon="Link" @click="emit('columnOptionsTypeChange', true)">自定义</el-button>
      </el-form-item>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts" name="tableColumnForm">
import { computed, onMounted, reactive, ref, watch } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage } from "element-plus";
import { Link } from "@element-plus/icons-vue";
import { API } from "@/api/modules/dwh/typings";
import { tableColumnController, userTableController } from "@/api/modules/dwh";

const ruleFormRef = ref<FormInstance>();

type Props = {
  tableInfoId: number | string;
  valueCode: string;
  valueLabel: string;
  preview: boolean;
};

const props = defineProps<Props>();

const rules = reactive<FormRules>({
  tableInfoId: [{ required: true, message: "请输入code" }],
  valueCode: [{ required: true, message: "code不能为空" }],
  valueLabel: [{ required: true, message: "label不能为空" }]
});

const tableInfo = ref<API.TableInfoVo[]>();

const dataSource = computed(() => {
  return new Set(tableInfo.value?.map(item => item.dataSource));
});

watch(
  () => props.tableInfoId,
  newVal => {
    listTableColumns(newVal);
  }
);

let tableColumns = ref<Array<API.TableColumnVo>>([]);

const listTableColumns = async (id: string | number) => {
  let { data } = await tableColumnController.listUsingGET({ param: Number(id) });
  tableColumns.value = data;
};

const loadTableInfos = async () => {
  let { data } = await userTableController.pageUserAuthTableUsingPOST({ page: { pageSize: 1000, pageIndex: 1 } });
  tableInfo.value = data;
};
onMounted(async () => {
  loadTableInfos();
  if (props.tableInfoId) {
    listTableColumns(props.tableInfoId);
  }
});

const emit = defineEmits<{
  columnOptionsTypeChange: [value: boolean];
  "update:tableInfoId": [value: number | string];
  "update:valueCode": [value: string];
  "update:valueLabel": [value: string];
}>();

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      ElMessage.success("提交的数据为 : " + JSON.stringify(ruleForm));
    } else {
      console.log("error submit!", fields);
    }
  });
};

const validateForm = async () => {
  let b = await ruleFormRef.value?.validate();
  return b;
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

defineExpose({
  validateForm,
  resetForm
});
</script>

<style scoped lang="scss">
.el-form {
  width: 100%;

  .text-center {
    text-align: center;
  }
}
</style>
